<template>
  <v-card class="mx-auto" max-width="700">
    <article v-html="msg"></article>
  </v-card>
</template>

<script>
export default {
  data: () => ({
    items: [
      {
        action: '15 min',
        headline: 'Brunch this weekend?',
        title: 'Ali Connors',
        subtitle:
          "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
      },
      {
        action: '2 hr',
        headline: 'Summer BBQ',
        title: 'me, Scrott, Jennifer',
        subtitle: "Wish I could come, but I'm out of town this weekend."
      },
      {
        action: '6 hr',
        headline: 'Oui oui',
        title: 'Sandra Adams',
        subtitle: 'Do you have Paris recommendations? Have you ever been?'
      },
      {
        action: '12 hr',
        headline: 'Birthday gift',
        title: 'Trevor Hansen',
        subtitle:
          'Have any ideas about what we should get Heidi for her birthday?'
      },
      {
        action: '18hr',
        headline: 'Recipe to try',
        title: 'Britta Holt',
        subtitle:
          'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
      }
    ],
    msg: `<section id="nice" data-tool="mdnice编辑器" data-website="https://www.mdnice.com" style="font-size: 16px; color: black; padding: 0 10px; line-height: 1.6; word-spacing: 0px; letter-spacing: 0px; word-break: break-word; word-wrap: break-word; text-align: left; margin-top: -10px; font-family: PingFangSC-Light;"><figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/b4c806dd-caa2-43f4-82d9-796ce6716267.svg" alt style="max-width: 100%; border-radius: 0px 0px 5px 5px; display: block; margin: 20px auto; width: 85%; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px;"></figure>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">请使用 <strong style="font-weight: border; color: rgb(248,57,41);">Chrome</strong> 浏览器。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">请阅读下方文本熟悉工具使用方法，本文可直接拷贝到微信中预览。</p>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-family: STHeitiSC-Light; font-size: 18px; font-weight: bolder; display: inline-block; padding-left: 10px; border-left: 5px solid rgb(248,57,41);">1 Markdown Nice 简介</span><span class="suffix"></span></h2>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: disc; font-size: 14px;">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">支持自定义样式的 Markdown 编辑器</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">支持微信公众号、知乎和稀土掘金</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">欢迎扫码回复「排版」加入用户群</section></li></ul>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/c3690018-4a92-4766-ac7e-ac54dd54c093.jpg" alt style="max-width: 100%; border-radius: 0px 0px 5px 5px; display: block; margin: 20px auto; width: 85%; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px;"></figure>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-family: STHeitiSC-Light; font-size: 18px; font-weight: bolder; display: inline-block; padding-left: 10px; border-left: 5px solid rgb(248,57,41);">2 主题</span><span class="suffix"></span></h2>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><strong style="font-weight: border; color: rgb(248,57,41);">https://preview.mdnice.com/themes/</strong></p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">欢迎提交主题，提供更多文章示例~~</p>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-family: STHeitiSC-Light; font-size: 18px; font-weight: bolder; display: inline-block; padding-left: 10px; border-left: 5px solid rgb(248,57,41);">3 通用语法</span><span class="suffix"></span></h2>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.1 标题</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">在文字写书写不同数量的<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">#</code>可以完成不同的标题，如下：</p>
<h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; border-bottom: 2px solid rgb(248,57,41); font-size: 1.3em;"><span class="prefix" style="display: none;"></span><span class="content" style="display: inline-block; font-weight: normal; background: rgb(248,57,41); color: #ffffff; padding: 3px 10px 1px; border-top-right-radius: 3px; border-top-left-radius: 3px; margin-right: 3px;">一级标题</span><span class="suffix"></span></h1>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-family: STHeitiSC-Light; font-size: 18px; font-weight: bolder; display: inline-block; padding-left: 10px; border-left: 5px solid rgb(248,57,41);">二级标题</span><span class="suffix"></span></h2>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">三级标题</span><span class="suffix" style="display: none;"></span></h3>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.2 无序列表</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">无序列表的使用，在符号<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">-</code>后加空格使用。如下：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: disc; font-size: 14px;">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">无序列表 1</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">无序列表 2</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">无序列表 3</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">如果要控制列表的层级，则需要在符号<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">-</code>前使用空格。如下：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: disc; font-size: 14px;">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">无序列表 1</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">无序列表 2
<ul style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; font-size: 14px; list-style-type: square;">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">无序列表 2.1</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">无序列表 2.2</section></li></ul>
</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><strong style="font-weight: border; color: rgb(248,57,41);">由于微信原因，最多支持到二级列表</strong>。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.3 有序列表</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">有序列表的使用，在数字及符号<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">.</code>后加空格后输入内容，如下：</p>
<ol data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: decimal; font-size: 14px;">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">有序列表 1</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">有序列表 2</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">有序列表 3</section></li></ol>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.4 引用</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">引用的格式是在符号<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">&gt;</code>后面书写文字。如下：</p>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; font-style: normal; border-left: none; padding: 10px; position: relative; line-height: 1.8; border-radius: 0px 0px 10px 10px; color: #FEEEED; background: #000; box-shadow: #84A1A8 0px 10px 15px;"><span style="display: inline; color: #FFF; font-size: 4em; font-family: Arial,serif; line-height: 1em; font-weight: 700;"> </span>
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; margin: 0px; line-height: 26px; color: #FEEEED; font-size: 13px; display: inline;">读一本好书，就是在和高尚的人谈话。 ——歌德</p>
<span style="float: right; display: inline; color: #FFF; font-size: 3em; line-height: 1em; font-weight: 500;">”</span></blockquote>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; font-style: normal; border-left: none; padding: 10px; position: relative; line-height: 1.8; border-radius: 0px 0px 10px 10px; color: #FEEEED; background: #000; box-shadow: #84A1A8 0px 10px 15px;"><span style="display: inline; color: #FFF; font-size: 4em; font-family: Arial,serif; line-height: 1em; font-weight: 700;"> </span>
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; margin: 0px; line-height: 26px; color: #FEEEED; font-size: 13px; display: inline;">雇用制度对工人不利，但工人根本无力摆脱这个制度。 ——阮一峰</p>
<span style="float: right; display: inline; color: #FFF; font-size: 3em; line-height: 1em; font-weight: 500;">”</span></blockquote>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.5 粗体和斜体</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">粗体的使用是在需要加粗的文字前后各加两个<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">*</code>。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-heigh t: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">而斜体的使用则是在需要斜体的文字前后各加一个<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">*</code>。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">如果要使用粗体和斜体，那么就是在需要操作的文字前后加三个<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">*</code>。如下：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><strong style="font-weight: border; color: rgb(248,57,41);">这个是粗体</strong></p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><em style="font-style: italic; color: rgb(248,57,41); letter-spacing: 0.3em;">这个是斜体</em></p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><em style="font-style: italic; color: rgb(248,57,41); letter-spacing: 0.3em;"><strong style="font-weight: bold; color: rgb(248,57,41); letter-spacing: 0.3em;">这个是粗体加斜体</strong></em></p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">注：由于 commonmark 标准，可能会导致加粗与想象不一致，如下</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">**今天天气好晴朗，**处处好风光。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">这个是正常现象，请参考<span class="footnote-word" style="font-weight: bold; color: rgb(248,57,41);">加粗 Issue</span><sup class="footnote-ref" style="line-height: 0; font-weight: bold; color: rgb(248,57,41);">[1]</sup>。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.6 链接</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">微信公众号仅支持公众号文章链接，即域名为<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">https://mp.weixin.qq.com/</code>的合法链接。使用方法如下所示：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">对于该论述，欢迎读者查阅之前发过的文章，<a href="https://mp.weixin.qq.com/s/s5IhxV2ooX3JN_X416nidA" style="text-decoration: none; word-wrap: break-word; font-weight: bold; color: rgb(248,57,41); border-bottom: 1px solid #ff3502; font-family: STHeitiSC-Light;">你是《未来世界的幸存者》么？</a></p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.7 分割线</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">可以在一行中用三个以上的减号来建立一个分隔线，同时需要在分隔线的上面空一行。如下：</p>
<hr data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px; height: 1px; padding: 0; border: none; border-top: medium solidid #333; text-align: center; background-image: linear-gradient(to right,rgba(248,57,41,0),rgba(248,57,41,0.75),rgba(248,57,41,0));">
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.8 删除线</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">删除线的使用，在需要删除的文字前后各使用两个<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">~</code>，如下：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><s>这是要被删除的内容。</s></p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.9 表格</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">可以使用冒号来定义表格的对齐方式，如下：</p>
<table data-tool="mdnice编辑器" style="display: table; text-align: left;">
<thead>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<th style="border: 1px solid #ccc; padding: 5px 10px; font-weight: bold; background-color: #f0f0f0; font-size: 14px; text-align: left;">姓名</th>
<th style="border: 1px solid #ccc; padding: 5px 10px; font-weight: bold; background-color: #f0f0f0; font-size: 14px; text-align: center;">年龄</th>
<th style="border: 1px solid #ccc; padding: 5px 10px; font-weight: bold; background-color: #f0f0f0; font-size: 14px; text-align: right;">工作</th>
</tr>
</thead>
<tbody style="border: 0;">
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="border: 1px solid #ccc; padding: 5px 10px; font-size: 14px; text-align: left;">小可爱</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; font-size: 14px; text-align: center;">18</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; font-size: 14px; text-align: right;">吃可爱多</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: #F8F8F8;">
<td style="border: 1px solid #ccc; padding: 5px 10px; font-size: 14px; text-align: left;">小小勇敢</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; font-size: 14px; text-align: center;">20</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; font-size: 14px; text-align: right;">爬棵勇敢树</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="border: 1px solid #ccc; padding: 5px 10px; font-size: 14px; text-align: left;">小小小机智</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; font-size: 14px; text-align: center;">22</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; font-size: 14px; text-align: right;">看一本机智书</td>
</tr>
</tbody>
</table>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">3.10 图片</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">插入图片，如果是行内图片则无图例，否则有图例，格式如下：</p>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/c3690018-4a92-4766-ac7e-ac54dd54c093.jpg" alt="这里写图片描述" style="max-width: 100%; border-radius: 0px 0px 5px 5px; display: block; margin: 20px auto; width: 85%; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px;"><figcaption style="margin-top: 5px; text-align: center; color: #888; display: block; font-size: 12px; font-family: PingFangSC-Light;">这里写图片描述</figcaption></figure>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">可以通过在图片尾部添加宽度和高度控制图片大小，用法如下：</p>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/4f78d8e8-77f6-4ea8-8a93-305087da06bd.png" alt="同时设置宽度和高度" width="150" height="150" style="max-width: 100%; border-radius: 0px 0px 5px 5px; display: block; margin: 20px auto; width: 85%; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px;"><figcaption style="margin-top: 5px; text-align: center; color: #888; display: block; font-size: 12px; font-family: PingFangSC-Light;">同时设置宽度和高度</figcaption></figure>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://imgkr.cn-bj.ufileos.com/4f78d8e8-77f6-4ea8-8a93-305087da06bd.png" alt="只设置宽度，推荐使用百分比" width="40%" style="max-width: 100%; border-radius: 0px 0px 5px 5px; display: block; margin: 20px auto; width: 85%; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px;"><figcaption style="margin-top: 5px; text-align: center; color: #888; display: block; font-size: 12px; font-family: PingFangSC-Light;">只设置宽度，推荐使用百分比</figcaption></figure>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">该语法比较特殊，其他 Markdown 编辑器不完全通用。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">支持 jpg、png、gif、svg 等图片格式，<strong style="font-weight: border; color: rgb(248,57,41);">其中 svg 文件仅可在微信公众平台中使用</strong>，svg 文件示例如下：</p>
<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px;"><img src="https://my-wechat.mdnice.com/mdnice/i_am_svg_20191024083453.svg" alt style="max-width: 100%; border-radius: 0px 0px 5px 5px; display: block; margin: 20px auto; width: 85%; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px;"></figure>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: disc; font-size: 14px;">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">支持图片<strong style="font-weight: border; color: rgb(248,57,41);">拖拽和截图粘贴</strong>到编辑器中上传，上传时使用当前选择的图床。</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">可使用<strong style="font-weight: border; color: rgb(248,57,41);">格式-&gt;图片</strong>上传本地图片，网站仅支持「图壳」图床，失败率低可长久保存！</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><strong style="font-weight: border; color: rgb(248,57,41);">注：仅支持 https 的图片，图片粘贴到微信时会自动上传微信服务器，不必担心使用上述图床会导致微信内图片丢失</strong>。</p>
<h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-family: STHeitiSC-Light; font-size: 18px; font-weight: bolder; display: inline-block; padding-left: 10px; border-left: 5px solid rgb(248,57,41);">4. 特殊语法</span><span class="suffix"></span></h2>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">4.1 脚注</span><span class="suffix" style="display: none;"></span></h3>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; font-style: normal; border-left: none; padding: 10px; position: relative; line-height: 1.8; border-radius: 0px 0px 10px 10px; color: #FEEEED; background: #000; box-shadow: #84A1A8 0px 10px 15px;"><span style="display: inline; color: #FFF; font-size: 4em; font-family: Arial,serif; line-height: 1em; font-weight: 700;"> </span>
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; margin: 0px; line-height: 26px; color: #FEEEED; font-size: 13px; display: inline;">支持平台：微信公众号、知乎。</p>
<span style="float: right; display: inline; color: #FFF; font-size: 3em; line-height: 1em; font-weight: 500;">”</span></blockquote>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">脚注与链接的区别如下所示：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; color: #333; background: #f8f8f8; display: block; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">链接：[<span class="hljs-string" style="color: #d14; line-height: 26px;">文字</span>](<span class="hljs-link" style="color: #009926; line-height: 26px;">链接</span>)
<span/>脚注：[<span class="hljs-string" style="color: #d14; line-height: 26px;">文字</span>](<span class="hljs-link" style="color: #009926; line-height: 26px;">脚注解释 "脚注名字"</span>)
<span/></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">有人认为在<span class="footnote-word" style="font-weight: bold; color: rgb(248,57,41);">大前端时代</span><sup class="footnote-ref" style="line-height: 0; font-weight: bold; color: rgb(248,57,41);">[2]</sup>的背景下，移动端开发（Android、IOS）将逐步退出历史舞台。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><span class="footnote-word" style="font-weight: bold; color: rgb(248,57,41);">全栈工程师</span><sup class="footnote-ref" style="line-height: 0; font-weight: bold; color: rgb(248,57,41);">[3]</sup>在业务开发流程中起到了至关重要的作用。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">脚注内容请拉到最下面观看。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">4.2 代码块</span><span class="suffix" style="display: none;"></span></h3>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; font-style: normal; border-left: none; padding: 10px; position: relative; line-height: 1.8; border-radius: 0px 0px 10px 10px; color: #FEEEED; background: #000; box-shadow: #84A1A8 0px 10px 15px;"><span style="display: inline; color: #FFF; font-size: 4em; font-family: Arial,serif; line-height: 1em; font-weight: 700;"> </span>
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; margin: 0px; line-height: 26px; color: #FEEEED; font-size: 13px; display: inline;">支持平台：微信代码主题仅支持微信公众号！其他主题无限制。</p>
<span style="float: right; display: inline; color: #FFF; font-size: 3em; line-height: 1em; font-weight: 500;">”</span></blockquote>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">如果在一个行内需要引用代码，只要用反引号引起来就好，如下：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">Use the <code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">printf()</code> function.</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">在需要高亮的代码块的前一行及后一行使用三个反引号，同时<strong style="font-weight: border; color: rgb(248,57,41);">第一行反引号后面表示代码块所使用的语言</strong>，如下：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; color: #333; background: #f8f8f8; display: block; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-comment" style="color: #998; font-style: italic; line-height: 26px;">// FileName: HelloWorld.java</span>
<span/><span class="hljs-keyword" style="color: #333; font-weight: bold; line-height: 26px;">public</span> <span class="hljs-class" style="line-height: 26px;"><span class="hljs-keyword" style="color: #333; font-weight: bold; line-height: 26px;">class</span> <span class="hljs-title" style="color: #458; font-weight: bold; line-height: 26px;">HelloWorld</span> </span>{
<span/>  <span class="hljs-comment" style="color: #998; font-style: italic; line-height: 26px;">// Java 入口程序，程序从此入口</span>
<span/>  <span class="hljs-function" style="line-height: 26px;"><span class="hljs-keyword" style="color: #333; font-weight: bold; line-height: 26px;">public</span> <span class="hljs-keyword" style="color: #333; font-weight: bold; line-height: 26px;">static</span> <span class="hljs-keyword" style="color: #333; font-weight: bold; line-height: 26px;">void</span> <span class="hljs-title" style="color: #900; font-weight: bold; line-height: 26px;">main</span><span class="hljs-params" style="line-height: 26px;">(String[] args)</span> </span>{
<span/>    System.out.println(<span class="hljs-string" style="color: #d14; line-height: 26px;">"Hello,World!"</span>); <span class="hljs-comment" style="color: #998; font-style: italic; line-height: 26px;">// 向控制台打印一条语句</span>
<span/>  }
<span/>}
<span/></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">支持以下语言种类：</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; color: #333; background: #f8f8f8; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">bash
clojure，cpp，cs，css
dart，dockerfile, diff
erlang
go，gradle，groovy
haskell
java，javascript，json，julia
kotlin
lisp，lua
makefile，markdown，matlab
objectivec
perl，php，python
r，ruby，rust
scala，shell，sql，swift
tex，typescript
verilog，vhdl
xml
yaml
</code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">如果想要更换代码主题，可在上方挑选，不支持代码主题自定义。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">其中<strong style="font-weight: border; color: rgb(248,57,41);">微信代码主题与微信官方一致</strong>，有以下注意事项：</p>
<ul data-tool="mdnice编辑器" style="margin-top: 8px; margin-bottom: 8px; padding-left: 25px; color: black; list-style-type: disc; font-size: 14px;">
<li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">带行号且不换行，代码大小与官方一致</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">需要在代码块处标志语言，否则无法高亮</section></li><li><section style="margin-top: 5px; margin-bottom: 5px; line-height: 26px; text-align: left; color: rgb(1,1,1); font-weight: 500; font-size: 13px;">粘贴到公众号后，用鼠标点代码块内外一次，完成高亮</section></li></ul>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">diff 不能同时和其他语言的高亮同时显示，且需要调整代码主题为微信代码主题以外的代码主题才能看到 diff 效果，使用效果如下:</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; color: #333; background: #f8f8f8; display: block; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;"><span class="hljs-addition" style="background: #dfd; line-height: 26px;">+ 新增项</span>
<span/><span class="hljs-deletion" style="background: #fdd; line-height: 26px;">- 删除项</span>
<span/></code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><strong style="font-weight: border; color: rgb(248,57,41);">其他主题不带行号，可自定义是否换行，代码大小与当前编辑器一致</strong></p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">4.3 数学公式</span><span class="suffix" style="display: none;"></span></h3>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; font-style: normal; border-left: none; padding: 10px; position: relative; line-height: 1.8; border-radius: 0px 0px 10px 10px; color: #FEEEED; background: #000; box-shadow: #84A1A8 0px 10px 15px;"><span style="display: inline; color: #FFF; font-size: 4em; font-family: Arial,serif; line-height: 1em; font-weight: 700;"> </span>
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; margin: 0px; line-height: 26px; color: #FEEEED; font-size: 13px; display: inline;">支持平台：微信公众号、知乎。</p>
<span style="float: right; display: inline; color: #FFF; font-size: 3em; line-height: 1em; font-weight: 500;">”</span></blockquote>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">块公式使用方法如下：</p>
" alt style="max-width: 100%; border-radius: 0px 0px 5px 5px; display: block; margin: 20px auto; width: 85%; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px;"></figure></span>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">矩阵：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">公式由于微信不支持，目前的解决方案是转成 svg 放到微信中，无需调整，矢量不失真。</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">目前测试如果公式量过大，在 Chrome 下会存在粘贴后无响应，但是在 Firefox 中始终能够成功。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">4.4 TOC</span><span class="suffix" style="display: none;"></span></h3>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; font-style: normal; border-left: none; padding: 10px; position: relative; line-height: 1.8; border-radius: 0px 0px 10px 10px; color: #FEEEED; background: #000; box-shadow: #84A1A8 0px 10px 15px;"><span style="display: inline; color: #FFF; font-size: 4em; font-family: Arial,serif; line-height: 1em; font-weight: 700;"> </span>
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; margin: 0px; line-height: 26px; color: #FEEEED; font-size: 13px; display: inline;">支持平台：微信公众号、知乎。</p>
<span style="float: right; display: inline; color: #FFF; font-size: 3em; line-height: 1em; font-weight: 500;">”</span></blockquote>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">TOC 全称为 Table of Content，列出全部标题。由于示例标题过多，需要使用将下方代码段去除即可。</p>
<pre class="custom" data-tool="mdnice编辑器" style="margin-top: 10px; margin-bottom: 10px;"><code class="hljs" style="overflow-x: auto; padding: 16px; color: #333; background: #f8f8f8; display: -webkit-box; font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; border-radius: 0px; font-size: 12px; -webkit-overflow-scrolling: touch;">[TOC]
</code></pre>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">由于微信只支持到二级列表，本工具仅支持二级标题和三级标题的显示。</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">4.5 注音符号</span><span class="suffix" style="display: none;"></span></h3>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; font-style: normal; border-left: none; padding: 10px; position: relative; line-height: 1.8; border-radius: 0px 0px 10px 10px; color: #FEEEED; background: #000; box-shadow: #84A1A8 0px 10px 15px;"><span style="display: inline; color: #FFF; font-size: 4em; font-family: Arial,serif; line-height: 1em; font-weight: 700;"> </span>
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; margin: 0px; line-height: 26px; color: #FEEEED; font-size: 13px; display: inline;">支持平台：微信公众号。</p>
<span style="float: right; display: inline; color: #FFF; font-size: 3em; line-height: 1em; font-weight: 500;">”</span></blockquote>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">支持注音符号，用法如下：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">Markdown Nice 这么好用，简直是<ruby>喜大普奔<rt>hē hē hē hē</rt></ruby>呀！</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">4.6 横屏滑动幻灯片</span><span class="suffix" style="display: none;"></span></h3>
<blockquote data-tool="mdnice编辑器" style="display: block; font-size: 0.9em; overflow: auto; overflow-scrolling: touch; padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 10px; margin-bottom: 20px; margin-top: 20px; font-style: normal; border-left: none; padding: 10px; position: relative; line-height: 1.8; border-radius: 0px 0px 10px 10px; color: #FEEEED; background: #000; box-shadow: #84A1A8 0px 10px 15px;"><span style="display: inline; color: #FFF; font-size: 4em; font-family: Arial,serif; line-height: 1em; font-weight: 700;"> </span>
<p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; margin: 0px; line-height: 26px; color: #FEEEED; font-size: 13px; display: inline;">支持平台：微信公众号。</p>
<span style="float: right; display: inline; color: #FFF; font-size: 3em; line-height: 1em; font-weight: 500;">”</span></blockquote>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">通过<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">&lt;![](url),![](url)&gt;</code>这种语法设置横屏滑动滑动片，具体用法如下：</p>
<section class="imageflow-layer1" data-tool="mdnice编辑器" style="margin-top: 1em; margin-bottom: 0.5em; white-space: normal; border: 0px none; padding: 0px; overflow: hidden;"><section class="imageflow-layer2" style="white-space: nowrap; width: 100%; overflow-x: scroll;"><section class="imageflow-layer3" style="display: inline-block; word-wrap: break-word; white-space: normal; vertical-align: middle; width: 100%;"><img alt="蓝1" src="https://my-wechat.mdnice.com/mdnice/%E8%93%9D1_20191109174052.jpg" class="imageflow-img" style="max-width: 100%; border-radius: 0px 0px 5px 5px; margin: 20px auto; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px; display: inline-block; width: 100%; margin-bottom: 0;"></section><section class="imageflow-layer3" style="display: inline-block; word-wrap: break-word; white-space: normal; vertical-align: middle; width: 100%;"><img alt="绿2" src="https://my-wechat.mdnice.com/mdnice/%E7%BB%BF2_20191109174052.jpg" class="imageflow-img" style="max-width: 100%; border-radius: 0px 0px 5px 5px; margin: 20px auto; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px; display: inline-block; width: 100%; margin-bottom: 0;"></section><section class="imageflow-layer3" style="display: inline-block; word-wrap: break-word; white-space: normal; vertical-align: middle; width: 100%;"><img alt="红3" src="https://my-wechat.mdnice.com/mdnice/%E7%BA%A23_20191109174052.jpg" class="imageflow-img" style="max-width: 100%; border-radius: 0px 0px 5px 5px; margin: 20px auto; height: 100%; object-fit: contain; box-shadow: #84A1A8 0px 10px 15px; display: inline-block; width: 100%; margin-bottom: 0;"></section></section></section><p class="imageflow-caption" data-tool="mdnice编辑器" style="padding-bottom: 8px; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em; text-align: center; margin-top: 0px; padding-top: 0px; color: #888;">&lt;&lt;&lt; 左右滑动见更多 &gt;&gt;&gt;</p><h2 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 22px; text-align: left; margin: 20px 10px 0px 0px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-family: STHeitiSC-Light; font-size: 18px; font-weight: bolder; display: inline-block; padding-left: 10px; border-left: 5px solid rgb(248,57,41);">5 其他语法</span><span class="suffix"></span></h2>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">5.1 HTML</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">支持原生 HTML 语法，请写内联样式，如下：</p>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;"><span style="display:block;text-align:right;color:orangered;">橙色居右</span>
<span style="display:block;text-align:center;color:orangered;">橙色居中</span></p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">5.2 UML</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">不支持，推荐使用开源工具<code style="font-size: 14px; word-wrap: break-word; padding: 2px 4px; border-radius: 4px; margin: 0 2px; background-color: rgba(27,31,35,.05); font-family: Operator Mono, Consolas, Monaco, Menlo, monospace; word-break: break-all; color: rgb(271,93,108);">https://draw.io/</code>制作后再导入图片</p>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">5.3 组件图床</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">组件目前共支持 3 种图床和 1 种自定义图床，主要特点如下：</p>
<table data-tool="mdnice编辑器" style="display: table; text-align: left;">
<thead>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<th style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-weight: bold; background-color: #f0f0f0; font-size: 14px;">图床</th>
<th style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-weight: bold; background-color: #f0f0f0; font-size: 14px;">费用</th>
<th style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-weight: bold; background-color: #f0f0f0; font-size: 14px;">有效期</th>
<th style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-weight: bold; background-color: #f0f0f0; font-size: 14px;">失败率</th>
</tr>
</thead>
<tbody style="border: 0;">
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">SM.MS</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">免费</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">长期</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">高</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: #F8F8F8;">
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">阿里云</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">付费</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">自定义</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">低</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">七牛云</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">10G 免费</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">自定义</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">低</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: #F8F8F8;">
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">自定义</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">高昂</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">自定义</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">自定义</td>
</tr>
</tbody>
</table>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">4 个图床的缺点：</p>
<table data-tool="mdnice编辑器" style="display: table; text-align: left;">
<thead>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<th style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-weight: bold; background-color: #f0f0f0; font-size: 14px;">图床</th>
<th style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-weight: bold; background-color: #f0f0f0; font-size: 14px;">缺点</th>
</tr>
</thead>
<tbody style="border: 0;">
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">SM.MS</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">失败率高可用性很差</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: #F8F8F8;">
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">阿里云</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">配置繁琐，费用昂贵</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: white;">
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">七牛云</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">配置繁琐，需购买长期域名</td>
</tr>
<tr style="border: 0; border-top: 1px solid #ccc; background-color: #F8F8F8;">
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">自定义</td>
<td style="border: 1px solid #ccc; padding: 5px 10px; text-align: left; font-size: 14px;">搭建后台繁琐</td>
</tr>
</tbody>
</table>
<h3 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span class="prefix" style="display: none;"></span><span class="content" style="font-size: 14px; color: rgb(165,213,93);">5.4 更多文档</span><span class="suffix" style="display: none;"></span></h3>
<p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em;">更多文档请参考 <span class="footnote-word" style="font-weight: bold; color: rgb(248,57,41);">markdown-nice-docs</span><sup class="footnote-ref" style="line-height: 0; font-weight: bold; color: rgb(248,57,41);">[4]</sup></p>
<h3 class="footnotes-sep" data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; font-weight: bold; color: black; font-size: 20px;"><span style="display: block;">参考资料</span></h3>
<section class="footnotes" data-tool="mdnice编辑器">
<span id="fn1" class="footnote-item" style="display: flex;"><span class="footnote-num" style="display: inline; width: 10%; background: none; font-size: 80%; opacity: 0.6; line-height: 26px; font-family: ptima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[1] </span><p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">加粗 Issue: <em style="font-style: italic; letter-spacing: 0.3em; color: #6E1E51; font-size: 12px;">https://github.com/markdown-it/markdown-it/issues/410</em></p>
</span>
<span id="fn2" class="footnote-item" style="display: flex;"><span class="footnote-num" style="display: inline; width: 10%; background: none; font-size: 80%; opacity: 0.6; line-height: 26px; font-family: ptima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[2] </span><p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">Front-end web development: <em style="font-style: italic; letter-spacing: 0.3em; color: #6E1E51; font-size: 12px;">https://en.wikipedia.org/wiki/Front-end_web_development</em></p>
</span>
<span id="fn3" class="footnote-item" style="display: flex;"><span class="footnote-num" style="display: inline; width: 10%; background: none; font-size: 80%; opacity: 0.6; line-height: 26px; font-family: ptima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[3] </span><p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">什么是全栈工程师: <em style="font-style: italic; letter-spacing: 0.3em; color: #6E1E51; font-size: 12px;">是指掌握多种技能，并能利用多种技能独立完成产品的人。</em></p>
</span>
<span id="fn4" class="footnote-item" style="display: flex;"><span class="footnote-num" style="display: inline; width: 10%; background: none; font-size: 80%; opacity: 0.6; line-height: 26px; font-family: ptima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;">[4] </span><p style="padding-top: 8px; padding-bottom: 8px; letter-spacing: 0.2em; word-spacing: 0.1em; display: inline; font-size: 14px; width: 90%; padding: 0px; margin: 0; line-height: 26px; color: black; word-break: break-all; width: calc(100%-50);">更多文档: <em style="font-style: italic; letter-spacing: 0.3em; color: #6E1E51; font-size: 12px;">https://docs.mdnice.com</em></p>
</span>
</section>
<p id="nice-suffix-juejin-container" class="nice-suffix-juejin-container" data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; color: black; margin: 10px 10px; line-height: 1.75; letter-spacing: 0.2em; font-size: 14px; word-spacing: 0.1em; margin-top: 20px !important;">本文使用 <a href="https://mdnice.com" style="text-decoration: none; word-wrap: break-word; font-weight: bold; color: rgb(248,57,41); border-bottom: 1px solid #ff3502; font-family: STHeitiSC-Light;">mdnice</a> 排版</p></section>`
  })
}
</script>
